<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>JQuery Validation Engine</title>
	<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
	<link rel="stylesheet" href="../css/template.css" type="text/css"/>
	<link rel="stylesheet" href="../css/customMessages.css" type="text/css"/>
	<script src="../js/jquery-1.8.2.min.js" type="text/javascript">
	</script>
	<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
	</script>
	<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
	</script>
	<script>
		jQuery(document).ready(function(){
			// binds form submission and fields to the validation engine
			jQuery("#formID").validationEngine({
				'custom_error_messages': {
					// Custom Error Messages for Validation Types
					'required': {
						'message': "This field cannot be empty."
					}
					,'custom[url]': {
						'message': "This validation error message will never be called"
					}
					// Custom Error Messages for IDs
					,'#url' : {
						'custom[url]': {
							'message': "This is an id error. It takes precedence over class and validation type errors."
						}
					}
					,'#number': {
						'min': {
							'message': "This must be greater than 0!"
						}
					}
					// Custom Error Messages for Classes
					,'.class_url': {
						'custom[url]': {
							'message': "This is a validation message for a class. It is never called because there" +
									" is an id error message."
						}
					}
					,'.class_req': {
						'required': {
							'message': "This is a class message. It takes precedence over validation type error messages."
						}

					}
				}
			});
		});
	</script>
</head>
<body>
	<h1 class="center">
		Custom Error Messages
	</h1>
	<p class="center">
		<a href="../index.html" >Back to index</a>
	</p>
	<form id="formID" class="formular" method="post">
		<fieldset>
			<legend>
				Required Fields!
			</legend>
			<label>
				<span >Validation Custom Error ('required'):</span>
				<input value="" data-validation-engine="validate[required]" class="text-input" type="text" name="req" id="req" />
			</label>
			<label>
				<span>ID Custom Error ('#number')</span>
				<input value="0" data-validation-engine="validate[required,min[1]]" data-validation-placeholder="This is a placeholder" class="text-input" type="number" name="reqplaceholder" id="number" />
			</label>
			<label>
				<span>Class Custom Error ('.class_req'):</span>
				<input value="" data-validation-engine="validate[required]" class="class_req text-input" type="text" name="class_req"  />
			</label>

		</fieldset>
			
		<fieldset>
			<legend>
				Custom
			</legend>
			<label>
				<span>All Three: </span>
				<input value="http://" data-validation-engine="validate[required,custom[url]]" class="class_url text-input" type="text" name="url" id="url" />
			</label>
		</fieldset>
		<input class="submit" type="submit" value="Validate &amp; Send the form!"/><hr/>
	</form>
</body>
</html>
